<template>
  <div>
    <a-list
      class="image-list"
      item-layout="horizontal"
      :gridProps="{ gutter: 0, span: 6 }"
      :bordered="false"
      :data="dataList"
      :split="true"
      :pagination="{
        showTotal: true,
        total,
      }"
    >
      <template #item="{ item }">
        <a-list-item class="list-demo-item">
          <a-image
            :src="item.url"
            :title="item.title"
            description="Present by Arco Design"
            width="260"
            footer-position="outer"
            :preview-visible="visible"
            @preview-visible-change="
              () => {
                visible = false;
              }
            "
          >
            <template #extra>
              <div class="actions actions-outer">
                <span
                  class="action"
                  @click="
                    () => {
                      visible = true;
                    }
                  "
                  ><icon-eye
                /></span>
                <span class="action" @click="onDownload(item)"
                  ><icon-download
                /></span>
                <a-tooltip content="A user’s avatar">
                  <span class="action"><icon-info-circle /></span>
                </a-tooltip>
              </div>
            </template>
          </a-image>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { PictureControllerService, PictureQueryRequest } from "../../generated";
import message from "@arco-design/web-vue/es/message";
import { onMounted, ref, watchEffect, withDefaults, defineProps } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

/*interface Props {
  searchText: any;
}

const props = withDefaults(defineProps<Props>(), {
  searchText: () => "",
});*/

const dataList = ref([]);
const total = ref(0);

const visible = ref(false);

const onDownload = (item: { title: string; url: string }) => {
  fetch(item.url)
    .then((response) => response.blob())
    .then((blob) => {
      const link = document.createElement("a");
      link.href = URL.createObjectURL(blob);
      link.download = item.title;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    })
    .catch((error) => {
      console.error("下载图片失败:", error);
    });
};

const searchParams = ref<PictureQueryRequest>({
  searchText: "",
  pageSize: 50, // 设置pageSize的初始值
  current: 1,
});

const loadData = async () => {
  const res = await PictureControllerService.listPictureByPageUsingPost(
    searchParams.value
  );
  if (res.code === 0) {
    dataList.value = res.data.records;
    total.value = res.data.total;
  } else {
    message.error("加载失败：" + res.message);
  }
};

/**
 * 监听 searchParams 变量，改变是触发页面的更新加载
 */
watchEffect(() => {
  searchParams.value = {
    ...searchParams.value,
    searchText: route.query.searchText,
  } as any;
  loadData();
});

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  loadData();
});
</script>

<style scoped>
.image-list {
  display: flex; /* 使用 flex 布局 */
  flex-wrap: wrap; /* 自动换行 */
  justify-content: flex-start; /* 主轴对齐方式为左对齐 */
}

.list-demo-item {
  width: 260px; /* 设置每个图片项的宽度 */
  height: 320px; /* 设置每个图片项的高度 */
  margin: 16px; /* 设置每个图片项的外边距 */
}
</style>
